<template>
	<view class="pb120r">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="茶室充值" back @onBack="goBack"
		></navbar>
		<view class="p20r">
			<view class="backColWhite borRad10r pl20r pr20r pb20r bSha0010u0rgb00001">
				<view class="foWeiBold f32r lh80r">
					选择茶室
				</view>
				<picker class="lh90r pl20r pr20r f30r backColF6f6f6 borRad5r"
					@change="pick1Change" :value="pick1Idx" :range="teahouseList" mode="selector"
					range-key="name"
				>
					<view class="disFlex">
						<view class="flex1">
							{{teahouseList && teahouseList.length ? teahouseList[pick1Idx].name : ''}}
						</view>
						<view class="w100r teAliRight">
							<image :src="baseUrl + 'iconRightBlack.png'" mode="aspectFit"
								class="w40r h40r poRel top6r"
							></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="backColWhite borRad10r pl20r pr20r pb20r mt20r bSha0010u0rgb00001">
				<view class="foWeiBold f32r lh80r">
					充值金额
				</view>
				<view class="wPer33S333333 disInBlo mb20r" :key="item.id"
					v-for="(item, index) in amountList"
				>
					<view :class="['mAuto', 'wPer90', 'boSiBorBox', 'teAliCenter',
							'h132r', 'disFlex', 'borRad10r', 'flDirColumn', 'juConCenter',
							item.checkVal ? 'backCol99c043 colFff' : 'bor1S99c043 col99c043'
						]" @click="cliAmountFun(index)"
					>
						<view class="foWeiBold">
							<text class="f34r">
								{{item.balance}}
							</text>
							元
						</view>
						<view :class="['f24r', 'mt10r',
								item.checkVal ? 'colFff' : 'colA9a8b0'
							]"
						>
							赠送{{item.giftAmount}}元
						</view>
					</view>
				</view>
				<view class="teAliCenter col999 lh100r" v-if="amountList.length == 0">
					该茶室暂未设置可充值的选项
				</view>
				<!-- <view class="borRad5r h90r pl20r pr20r backColF6f6f6 disFlex aliItCenter mt20r">
					<view class="flex1">
						<input type="number" class="f26r" disabled
							v-model="rechargeNum"
						>
					</view>
					<view class="w50r col99c043 teAliRight">
						元
					</view>
				</view> -->
			</view>
			<view class="backColWhite borRad10r pl20r pr20r pb20r mt20r bSha0010u0rgb00001" v-if="charactersList.length">
				<view class="foWeiBold f32r lh80r">
					充值介绍
				</view>
				<view class="lh50r"
					v-for="item in charactersList" :key="item.id"
				>
					{{item.introduce}}
				</view>
			</view>
		</view>
		<view class="lh90r backImgLiGrTR2c6739a99c043 teAliCenter poFixed left25r bom30r w700r colFff borRad45r f30r"
			@click="cliRechargeNow"
		>
			立即充值
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { isMemberGetTeaList, getRechargeMemberInfo,
	toWechatpayment } from '@/utils/api.js'
import { baseUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			optionTid: '',
			optionType: '',
			pick1Idx: 0,
			teahouseList: [],
			amountList: [],
			// rechargeNum: ''
			rechargeId: '',
			charactersList: []
		}
	},
	onLoad(options) {
		let lngAndLat = uni.getStorageSync('lngAndLat');
		if(lngAndLat && lngAndLat.longitude && lngAndLat.latitude) {
			isMemberGetTeaList({
				lng: lngAndLat.longitude, lat: lngAndLat.latitude
			}).then(res1 => {
				if(res1.data && res1.data.length) {
					this.teahouseList = res1.data;
					if(options.tid) {
						this.optionTid = options.tid;
						this.teahouseList.forEach((item1, index1) => {
							if(item1.id == options.tid) this.pick1Idx = index1
						})
						this.getDataList1();
					}else {
						this.getDataList1();
					}
				}
			})
		}else {
			uni.showModal({
				title: '提示', confirmColor: '#99c043',
				content: '检测到您没打开获取信息功能权限，请到首页点击右上角打开',
				confirmText: '去首页', 
				success: (res1) => {
					if (res1.confirm) {
						uni.switchTab({ url: '/pages/index/index' })
					}
				}
			})
		}
		if(options.type) this.optionType = options.type;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getDataList1() {
			this.amountList = [];
			this.charactersList = [];
			getRechargeMemberInfo({
				token: uni.getStorageSync('token'),
				tid: this.teahouseList[this.pick1Idx].id
				// tid: 2
			}).then(res2 => {
				if(res2.data && res2.data.length) {
					res2.data.forEach(item1 => {
						if(item1.status == 1) {
							this.amountList.push(item1);
							this.amountList.forEach(item2 => {
								item2.giftAmount = Math.round((Number(item2.reality_balance) - Number(item2.balance)) * 100) / 100;
							})
						}else if(item1.status == 2) {
							this.charactersList.push(item1);
						}
					})
					console.log(this.charactersList);
				}else {
					// this.amountList = [];
				}
			})
		},
		pick1Change(eee) {
			this.pick1Idx = eee.detail.value
			// this.rechargeNum = '';
			this.rechargeId = '';
			this.getDataList1();
		},
		cliAmountFun(idx) {
			this.amountList.forEach((item, index) => {
				if(idx == index) {
					item.checkVal = true;
					// this.rechargeNum = item.balance;
					this.rechargeId = item.id
				}else {
					item.checkVal = false;
				}
			})
		},
		cliRechargeNow() {
			if(this.rechargeId == '') {
				return uni.showToast({
					title: '请选择充值金额', icon: 'none', duration: 3000
				})
			}
			toWechatpayment({
				token: uni.getStorageSync('token'),
				tid: this.teahouseList[this.pick1Idx].id,
				cid: this.rechargeId
			}).then(res1 => {
				console.log(11, res1);
				uni.requestPayment({
					provider: 'wxpay', // 服务提供商
					timeStamp: res1.data.timeStamp, // 时间戳
					nonceStr: res1.data.nonceStr, // 随机字符串
					package: res1.data.package,
					signType: res1.data.signType, // 签名算法
					paySign: res1.data.paySign, // 签名
					success:res2 => {
						console.log(22, res2);
						this.gotoBack('充值成功！', '您已充值成功');
					},
					fail:err2 => {
						console.log('支付失败-err2', err2);
						this.gotoBack('充值失败！', '您已取消支付');
					}
				})
			})
		},
		gotoBack(title, content) {
			uni.showModal({
				title, content, cancelText: '返回',
				confirmText: '查看余额',
				confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						if(this.optionType == 1) {
							uni.navigateBack();
						}else {
							uni.redirectTo({
								url: '/pages/index/walletList'
							})
						}
					} else if (res1.cancel) {
						uni.navigateBack();
					}
				}
			})
		}
	}
}
</script>
<style>
</style>